<!-- 角色列表 -->
<template>
  <div class="rolelist">
    <el-col :span="24">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-card class="box-card">
      <div class="text item" style="line-height: 0;text-align: left;">
        <el-button type="primary" style="margin-bottom: 20px;" @click="btnStatus.isShow = true">新增角色</el-button>
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand"
                v-for="(firstLevel, firstIndex) in props.row.children">
                <el-form-item>
                  <el-tag>{{ firstLevel.authName }} <p class="iconfont el-icon-close"></p></el-tag>
                </el-form-item>
                <el-form-item v-for="(secondLevel, secondIndex) in firstLevel.children">
                  <el-tag type="success">{{ secondLevel.authName }} <p class="iconfont el-icon-close"></p></el-tag>
                  <!-- 处理第三级子级数组 -->
                  <!-- 将第三级子级数组处理移到和二级子数组同级 -->
                  <el-form-item v-for="(thirdLevel, thirdIndex) in firstLevel.children.reduce((acc, cur) => {
                    if (cur.children) {
                      return acc.concat(cur.children);
                    }
                    return acc;
                  }, [])">
                    <el-tag type="info">{{ thirdLevel.authName }} <p class="iconfont el-icon-close"></p></el-tag>
                  </el-form-item>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="">
            <!-- 箭头 -->
            <template slot-scope="scope">
              <el-icon>
                <arrow-right />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column label="" prop="id">
          </el-table-column>
          <el-table-column label="角色名称" prop="roleName">
          </el-table-column>
          <el-table-column label="描述" prop="roleDesc">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary">编辑</el-button>
              <el-button type="danger">删除</el-button>
              <el-button type="info">设置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 新增角色弹窗 -->
    <el-dialog title="添加角色" :visible.sync="btnStatus.isShow" width="30%" center style="line-height: 0;">
      <el-form ref="formRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input autocomplete="off" v-model="formAddData.roleName" />
          <span style="display: block; height: 20px;color: red;">{{ formAddData.roleNameMsg }}</span>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input autocomplete="off" v-model="formAddData.roleDesc" />
          <span style="display: block; height: 20px;color: red;">{{ formAddData.roleDescMsg }} </span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnStatus.isShow = false">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑角色弹窗 -->
    <el-dialog title="编辑角色" :visible.sync="btnStatus.isEdit" width="30%" center style="line-height: 0;">
      <el-form ref="formRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input autocomplete="off" v-model="formEditData.roleName" />
          <span style="display: block; height: 20px;color: red;">{{ formEditData.roleNameMsg }}</span>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input autocomplete="off" v-model="formEditData.roleDesc" />

  </div>
</template>
      <script>
      import axios from 'axios'
      export default {
        data() {
          return {
            baseURL: 'http://43.138.15.137:7000/api/private/v1',
            token: localStorage.getItem('token'),
            tableData: [],
            // 按钮状态数组
            btnStatus: {
              isShow: false,
              isEdit: false,
              isDel: false,
              isSet: false
            },
            // 添加角色
            formAddData: {
              roleName: '',
              roleDesc: '',
              // 提示
              roleNameMsg: '',
              roleDescMsg: ''
            }
          }
        },
        created() {
          this.getRoleList()
        },
        methods: {
          async getRoleList() {
            const res = await axios.get(this.baseURL + '/roles', {
              headers: {
                'Authorization': this.token
              }
            }).then(res => {
              let data = res.data.data
              this.tableData = data
              console.log(this.tableData);
              console.log(this.tableData[0].children);
            })
          },
          addRole() {
            this.btnStatus.isShow = false
            // 校验
            if (this.formAddData.roleName == '') {
              this.formAddData.roleNameMsg = '请输入角色名称'
              return
            }
            if (this.formAddData.roleDesc == '') {
              this.formAddData.roleDescMsg = '请输入角色描述'
              return
            }
            axios.post(this.baseURL + '/roles', {
              roleName: this.formAddData.roleName,
              roleDesc: this.formAddData.roleDesc
            }, {
              headers: {
                'Authorization': this.token
              }
            }).then(res => {
              console.log(res);
              let { data, meta } = res.data
              if (meta.status == 201) {
                this.getRoleList()
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.formAddData.roleName = ''
                this.formAddData.roleDesc = ''
              }
            })
          }
        }
      }
</script>